import Manager, { type TableColumnConfig, type ManageApiConfig } from "../../component/Manager/index.tsx";
import { type FormItemConfigs } from "../../global.ts";
import dayjs from "dayjs";
import React from 'react';

export default function SystemParams() {
  // 表格列配置
  const tableColumnConfig: TableColumnConfig[] = [
    {
      title: '序号',
      dataIndex: '_index',
      key: '_index',
      fixed: 'left',
      width: 80
    },
    {
      title: '参数键',
      dataIndex: 'param_key',
      key: 'param_key',
      width: 200
    },
    {
      title: '参数值',
      dataIndex: 'param_value',
      key: 'param_value',
      width: 200
    },
    {
      title: '参数说明',
      dataIndex: 'description',
      key: 'description',
      width: 300
    },
    {
      title: '更新时间',
      dataIndex: 'updated_at',
      key: 'updated_at',
      width: 180,
      render: (text: string) => dayjs(text).format('YYYY-MM-DD HH:mm:ss')
    },
    {
      title: "操作",
      dataIndex: "operate",
      key: "operate",
      width: 120
    }
  ];

  // 搜索表单配置
  const searchFormFieldConfig: FormItemConfigs[] = [
    {
      type: 'input',
      label: '参数键',
      name: 'param_key',
      placeholder: '请输入参数键'
    },
    {
      type: 'input',
      label: '参数说明',
      name: 'description',
      placeholder: '请输入参数说明'
    }
  ];

  // 编辑表单配置
  const editFormFieldConfig: FormItemConfigs[] = [
    {
      label: 'id',
      name: 'id',
      type: 'hidden'
    },
    {
      type: 'input',
      label: '参数键',
      name: 'param_key',
      rules: [{ required: true, message: '请输入参数键' }]
    },
    {
      type: 'input',
      label: '参数值',
      name: 'param_value',
      rules: [{ required: true, message: '请输入参数值' }]
    },
    {
      type: 'textarea',
      label: '参数说明',
      name: 'description',
      rules: [{ required: true, message: '请输入参数说明' }]
    }
  ];

  // 新增表单配置
  const addFormFieldConfig = editFormFieldConfig.filter(item => item.name !== 'id') as FormItemConfigs[];

  // API 配置
  const apiConfig: ManageApiConfig = {
    search: '/v1/admin/system-params',
    add: '/v1/admin/system-params',
    edit: '/v1/admin/system-params',
    delete: '/v1/admin/system-params'
  };

  return (
    <Manager
      apiConfig={apiConfig}
      tableColumnConfig={tableColumnConfig}
      searchFormFieldConfig={searchFormFieldConfig}
      editFormFieldConfig={editFormFieldConfig}
      addFormFieldConfig={addFormFieldConfig}
      enableAdd
      enableEdit
      enableDelete
      defaultViewType="list"
    />
  );
} 